import ReactQuill from 'react-quill'; // ES6
import 'react-quill/dist/quill.snow.css'; // ES6
import React from 'react';
import {Button, Form, Input} from 'antd';
import reqwest from 'reqwest';
import './EditorPro.css';

const FormItem = Form.Item;

class EditorPro extends React.Component {
    constructor(props) {
        super(props);
        this.state = {text: '', onSubmit: false}; // You can also pass a Quill Delta here
        this.modules = {
            toolbar: [
                [{'header': [1, 2, 3, 4, false]}],
                ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
                ['link', 'image', 'code-block'],
                ['clean']
            ],
        };
        this.formats = [
            'header',
            'bold', 'italic', 'underline', 'strike', 'blockquote',
            'list', 'bullet', 'indent',
            'link', 'image', 'code-block'
        ];
    }


    handleChange = (value) => {
        this.setState({text: value});
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll({force: true}, (err, values) => {
            if (!err) {
                this.setState({
                    onSubmit: true,
                });
                reqwest({
                    url: '/api/articles',
                    method: 'post',
                    data: {body: this.state.text, title: values.title},
                    success: (res) => {
                        if (res.error === '') {
                            this.props.form.resetFields();
                            this.setState({
                                text: '',
                                onSubmit: false,
                            });
                            this.props.handleSubmit(res);
                        }
                    }
                })
            }
        })
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form className={'text-editor'} onSubmit={this.handleSubmit}>
                <FormItem>
                    {getFieldDecorator('title', {
                        rules: [{required: true, message: '请输入标题！', whitespace: true}],
                    })(
                        <Input placeholder={'标题'}/>
                    )}
                </FormItem>
                <FormItem>
                    <ReactQuill
                        value={this.state.text}
                        onChange={this.handleChange}
                        modules={this.modules}
                        formats={this.formats}
                    />
                </FormItem>
                <FormItem style={{textAlign: 'right'}}>
                    <Button type={'primary'} style={{marginTop: '20px'}} htmlType={'submit'}
                            loading={this.state.onSubmit}>提交</Button>
                </FormItem>
            </Form>
        )
    }
}

const WrapperEditorPro = Form.create()(EditorPro);

export default WrapperEditorPro;